<template>
	<view class="search-container">
		<!-- 搜索头部 -->
		<view class="search-header">
			<!-- <view class="back-btn" @click="goBack">
        <text class="back-icon">&lt;</text>
      </view> -->
			<view class="search-bar">
				<view class="search-input-wrapper">
					<image src="/static/indexicon/fdj.png" mode="" class="search-icon"></image>
					<input type="text" class="search-input" v-model="searchKeyword" placeholder="搜索小区、商圈"
						@input="handleSearch" focus />
					<text class="clear-icon" v-if="searchKeyword" @click="clearSearch">✕</text>
				</view>
			</view>
			<view class="cancel-btn" @click="cancelSearch">
				<text>取消</text>
			</view>
		</view>

		<!-- 搜索结果列表 -->
		<view class="search-results" v-if="searchKeyword && filteredResults.length > 0">
			<view class="result-item" v-for="result in filteredResults" :key="result" @click="selectResult(result)">
				<text class="result-text">{{ result }}</text>
			</view>
		</view>

		<!-- 无结果提示 -->
		<view class="no-results" v-if="searchKeyword && filteredResults.length === 0">
			<text>未找到相关结果</text>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue'

	// 搜索关键字
	const searchKeyword = ref('')

	// 模拟数据 - 小区名称列表
	const communityList = [
		'南浦海滨花园',
		'前进路南园大街',
		'汇侨新城南区',
		'南国奥林匹克花园',
		'荔港南湾',
		'岭南新世界',
		'南洲花苑A区',
		'南洲名苑',
		'华南理工大学宿舍凤凰新村',
		'暨南花园'
	]

	// 计算过滤后的结果
	const filteredResults = computed(() => {
		if (!searchKeyword.value) return []

		// 转换为小写进行不区分大小写的搜索
		const keyword = searchKeyword.value.toLowerCase()
		return communityList.filter(item =>
			item.toLowerCase().includes(keyword)
		)
	})

	// 处理搜索输入
	const handleSearch = () => {
		// 搜索逻辑已经通过计算属性实现
		console.log('搜索关键字:', searchKeyword.value)
	}

	// 清空搜索
	const clearSearch = () => {
		searchKeyword.value = ''
	}

	// 取消搜索,清空输入框内容,返回上一页
	const cancelSearch = () => {
		searchKeyword.value = ''
		
		//返回上一页
		uni.navigateBack()
	}

	// 返回按钮
	const goBack = () => {
		uni.navigateBack()
	}

	// 选择搜索结果
	const selectResult = (result) => {
		console.log('选择的结果:', result)
		// 在实际应用中，这里可以将选择的结果返回给上一页
		// uni.navigateBack({ delta: 1 })
		// 或者跳转到详情页
		// uni.navigateTo({ url: `/pages/views/detail/detail?community=${encodeURIComponent(result)}` })
	}
</script>

<style scoped>
	.search-container {
		width: 100%;
		height: 100vh;
		background-color: #ffffff;
	}

	.search-header {
		display: flex;
		align-items: center;
		padding: 10px 15px;
		background-color: #ffffff;
		border-bottom: 1px solid #f0f0f0;
	}

	.back-btn {
		width: 40px;
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.back-icon {
		font-size: 20px;
		color: #333333;
	}

	.search-bar {
		flex: 1;
		margin: 0 10px;
	}

	.search-input-wrapper {
		display: flex;
		align-items: center;
		background-color: #f5f5f5;
		border-radius: 20px;
		padding: 0 15px;
		height: 60rpx;
	}

	.search-icon {
		width: 30rpx;
		height: 30rpx;
	}

	.search-input {
		flex: 1;
		height: 30px;
		background-color: transparent;
		border: none;
		outline: none;
		font-size: 14px;
		color: #333333;
		padding-left: 20rpx;
	}

	.clear-icon {
		font-size: 14px;
		color: #999999;
		padding: 5px;
		cursor: pointer;
	}

	.cancel-btn {
		padding: 0 10px;
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.cancel-btn text {
		font-size: 14px;
		color: #333333;
	}

	.search-results {
		padding: 10px 0;
	}

	.result-item {
		padding: 15px 15px;
		border-bottom: 1px solid #f5f5f5;
	}

	.result-text {
		font-size: 14px;
		color: #2d8c13;
	}

	.result-item:active {
		background-color: #f9f9f9;
	}

	.no-results {
		padding: 30px 15px;
		text-align: center;
	}

	.no-results text {
		font-size: 14px;
		color: #999999;
	}

	/* 适配不同设备 */
	@media screen and (min-width: 768px) {
		.search-header {
			padding: 15px 20px;
		}

		.search-input-wrapper {
			height: 45px;
		}

		.search-input {
			font-size: 16px;
		}
	}
</style>